<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04/6折行.html</title>
    <style>
      #s1 {
        width: 500px;
        height: 400px;
        border: solid 1px red;
        display: flex;
        /* flex-wrap换行 */
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      .box {
        border: solid 1px black;
        flex-basis: 100px;
        height: 100px;
        /* margin-left: 10px; */
        align-self: flex-start;
      }
      .bottom {
        /* 设置flex子项单独在侧轴(纵轴/纵向排列的轴/横线)方向上的对齐方式 */
        align-self: flex-start;
      }
      .hide {
        /* 让一个元素在页面中不显示而且页面中也没有他的位置
         display: none; */
        /* 让一个元素在页面中不显示但是页面中有他的位置 */
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <section id="s1">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box bottom">10</div>
      <div class="box hide">11</div>
      <div class="box hide">12</div>
    </section>
  </body>
</html>
